<template>
  <div class="aside">
    <div class="aside__title">你还可以兑换</div>
    <ul class="aside__list">
      <li
        class="aside__list__product"
        v-for="item in info"
        :key="item.id"
        @click="changeProduct(item.id)"
      >
        <img :src="imgBaseUrl + item.img" alt="" width="82" />
        <div>
          <div class="aside__list__product__name">{{ item.name }}</div>
          <div class="aside__list__product__price">
            <span>{{ item.coin }}</span>
            <img src="../../assets/img/monad.png" alt="" width="30" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import router from "@/router";
export default {
  name: "Aside",
  props: ["info"],
  methods: {
    changeProduct(id) {
      router.push({
        params: { id },
        name: "Details",
      });
    },
  },
};
</script>

<style lang='less' scoped>
.aside {
  padding-left: 19px;
  border-left: 1px solid #ececec;
  font-family: SourceHanSansSC;
  &__title {
    font-size: 18px;
    color: #333333;
    margin-bottom: 5px;
  }
  &__list {
    display: flex;
    flex-direction: column;
    height: 570px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 3px;
      height: 0px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #aaa;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #fff;
    }
    &__product {
      cursor: pointer;
      margin: 15px 0;
      display: flex;
      &:hover > img {
        border: 1px solid #0a328e;
      }
      &:hover &__name {
        color: #0a328e;
      }
      img {
        border: 1px solid transparent;
        margin-right: 11px;
      }
      &__name {
        font-size: 18px;
        font-weight: 300;
        color: #666;
        line-height: 20px;
        /*这里要显示的设置宽度*/
        overflow: hidden;
        white-space: nowrap;
        /*文字超出宽度则显示ellipsis省略号*/
        text-overflow: ellipsis;
        width: 110px;
      }
      &__price {
        display: flex;
        align-items: center;
        margin-top: 24px;
        span {
          color: #fd604d;
          font-size: 18px;
          font-weight: 700;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>